/**
 * 道闸模块
 * @author xiaoxujs
 */

import { Button, message } from "antd";
import { CardHtmlBox, ListStyleModuleBox, PLCCanshuBox } from "./style";
import { FC, useCallback, useEffect, useState } from "react";
import DaozhaSetModule from "./DaozhaSetModule";
import { getTlplTLaneQueryGateParam } from "./api";
import { ITlplTLaneQueryGateParam } from "./type";

const DaozhaModule: FC<{
    laneId?: string; // 装车站ID
}> = ({
    laneId
}) => {
        const [daozhaSetShow, setDaozhaSetShow] = useState(false); //道闸数据修改
        /**
         * 设置道闸参数
         */
        const [daozhaValue, setDaozhaValue] = useState<ITlplTLaneQueryGateParam>(); // 入口道闸数据
        const daozhaValueFun = useCallback(async () => {
            if (laneId) {
                console.log(laneId)
                const { code, msg, data } = await getTlplTLaneQueryGateParam({ laneId }) as { code: number, msg: string, data: ITlplTLaneQueryGateParam };
                if (code === 20000) {
                    setDaozhaValue(data);
                } else {
                    message.error(msg);
                }
            }else{
                message.warning('缺少道闸ID');
            }
        }, [laneId])
        useEffect(() => {
            daozhaValueFun();
        }, [daozhaValueFun])

            // 编辑弹窗 - 回调
    const handleSetCallback = () => {
        setDaozhaSetShow(false);
        daozhaValueFun();
    }
        return <CardHtmlBox >
            <div className="box-top">
            <div className="box-top-title">道闸信息</div>
                <Button type="link" onClick={() => {
                    setDaozhaSetShow(true);
                }}>设置参数</Button>
            </div>
            <PLCCanshuBox>
                <ListStyleModuleBox>
                    <thead>
                        <tr className="box-title-tr">
                            <th align='center'>名称</th>
                            <th align='center'>设备序列号</th>
                            <th align='center'>设备IP地址</th>
                            <th align='center'>设备SDK端口号</th>
                            <th align='center'>设备SDK用户名</th>
                            <th align='center'>设备SDK密码</th>
                            <th align='center'>入口道闸IO输出端口</th>
                            <th align='center'>出口道闸IO输出端口</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr className="box-tr">
                            <td align='center'>{(daozhaValue && daozhaValue.gateName) || '--'}</td>
                            <td align='center'>{(daozhaValue && daozhaValue.gateNum) || '--'}</td>
                            <td align='center'>{(daozhaValue && daozhaValue.gateIp) || '--'}</td>
                            <td align='center'>{(daozhaValue && daozhaValue.gatePort) || '--'}</td>
                            <td align='center'>{(daozhaValue && daozhaValue.gateUsername) || '--'}</td>
                            <td align='center'>{(daozhaValue && daozhaValue.gatePassword) || '--'}</td>
                            <td align='center'>{(daozhaValue && daozhaValue.gateInPort) || '--'}</td>
                            <td align='center'>{(daozhaValue && daozhaValue.gateOutPort) || '--'}</td>
                        </tr>
                    </tbody>
                </ListStyleModuleBox>
            </PLCCanshuBox>
            {/* 设置道闸 */}
            <DaozhaSetModule
                open={daozhaSetShow}
                handleSetCallback={handleSetCallback}
                clickData={daozhaValue}
                laneId={laneId}
            />
        </CardHtmlBox>
    }

export default DaozhaModule;